<template>
  <div class="svg-demo">
    <h2>SVG加载示例</h2>
    <!-- 直接引入SVG文件 -->
    <div class="svg-example">
      <p>使用组件方式引入:</p>
      <VueLogo class="logo"/>
    </div>

    <div class="svg-example">
      <p>使用img标签引入:</p>
      <!-- ?url 表示将SVG文件作为URL引入 -->
      <img src="@/assets/vite.svg?url" alt="Vue Logo" class="logo"/>
    </div>
  </div>
</template>

<script setup>
// 导入SVG组件
import VueLogo from '@/assets/vue.svg';
</script>

<style scoped>
.svg-demo {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.svg-example {
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.logo {
  width: 120px;
  height: 120px;
  display: block;
  margin-top: 10px;
}
</style>